import React, { useState } from 'react';
import { AreaChartOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import { DatePicker } from 'antd';
const { MonthPicker } = DatePicker;

function Power() {
  const [params, setparams] = useState({
    month: moment(),
  });
  let columnes = [
    {
      title: `功率`,
      dataIndex: 'key',
      key: 'key',
      search: false,
    },
    {
      title: '人数',
      dataIndex: 'userCount',
      key: 'userCount',
      search: false,
    },
    {
      title: '次数',
      dataIndex: 'count',
      key: 'count',
      search: false,
    },
    {
      title: '消耗电量',
      dataIndex: 'chargeKwh',
      key: 'chargeKwh',
      search: false,
    },
    {
      title: '总金额',
      dataIndex: 'totalMoney',
      key: 'totalMoney',
      search: false,
    },
  ];

  return (
    <div>
      <p
        className="title"
        style={{ marginBottom: 0, display: 'flex', justifyContent: 'space-between', padding: 0 }}
      >
        <span>
          <AreaChartOutlined style={{ paddingRight: 6 }} />
          充电功率统计
        </span>
        <MonthPicker
          size="small"
          style={{ height: 26 }}
          value={params.month}
          onChange={(val) => {
            setparams({
              month: val,
            });
          }}
        />
      </p>
      <AutoTable
        path="/vehicle-api/charge/power_statistic"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columnes}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'rows'}
        extraparams={{
          month: moment(params?.month).format('YYYY-MM'),
        }}
      />
    </div>
  );
}

export default Power;
